<template>
  <div class="recordDetail" v-if="props.showDialog">
    <Dialog
      diaTop="13"
      headerName="详情"
      :showDialog="true"
      @close="close"
      @save="save"
      saveLetter="保存"
      diaWidth="28"
      footerTop="10"
      :footerShow="false"
    >
      <template #content>
        <div class="dia-record-detail">
          <div class="line">处置单位：{{disposeName}}</div>
          <div class="line">涉废类型：   {{wasteList?.find(item => item.value == itemDetail.wastetype)?.label}}</div>
          <div class="line">处置量：{{itemDetail.wastenum}}{{unitList.find((item)=>item.id==itemDetail.wastenum)?.name}}</div>
          <div class="line">处置联单编号：{{itemDetail.orderno}}</div>
          <div class="line">处置时间：{{itemDetail.committime}}</div>
          <div class="line">处置联单图片：<button @click="searchImage(itemDetail.disposeimgurl)">点击查看</button></div>

          <div class="line">车辆信息：{{itemDetail.transtruck}}</div>
          <div class="line">驾驶员信息：{{itemDetail.transdriver}}</div>
        </div>
      </template>
    </Dialog>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
      
    />
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import http from '@http'
import Upload from "@/components/Upload";
let props = defineProps(["showDialog",'itemDetail','wasteList','disposeName']);
let emit = defineEmits(["update:showDialog", "save"]);
let recordFlag = ref(false);
let showImg =ref(false)
let srcList=  ref([])
let unitList=  ref([])
let formData = reactive({ enterpriseName: "" });
let pagiFacilityParams = reactive({});
let pagiFacilityTotal = ref(1);
let facilityList = ref([

]);
let close = () => {
  console.log("-=-=");
  emit("update:showDialog", false);
};
let save = () => {
  emit("save");
};
let searchImage = (url)=>{
  showImg.value =true
  srcList.value =[url]
}
let handelDetail = () => {
  recordFlag.value = true;
};
let editDetail = () => {};
let rules = {
  enterpriseName: [
    {
      required: true,
      message: "企业名称不能为空",
      trigger: "blur",
    },
  ],
};
http({url:'/listitem/getmodule',data:{module: "B04"}}).then((res)=>{
  if(res.code==0){
    unitList.value = res.data
  }
})
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.recordDetail {
  .dia-record-detail {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    /* border-radius: 10px !important; */
    padding-left: 80px;
    .line {
      margin-top: 30px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24px;

      color: #333333;

      button {
        color: #0874fa;
        font-weight: 400;
        font-size: 24px;
      }
    }
  }
  .content-wrap {
    padding-right: 10px;
    .data-wrap {
      height: 72vh;
      overflow-y: scroll;
      .table-height {
        height: 64vh;
      }
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        padding-left: 19px;

        padding-right: 17px;
        button {
          width: 89px;
          height: 37px;
          border-radius: 4px;

          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 19px;
        }
        .change-btn {
          color: #0874fa;
          background-color: #cee3fe;
        }
        .record-btn {
          color: #fa8508;
          background-color: #fee7ce;
        }
      }
    }
    .qr-code {
      width: 826px;
      height: 263px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .content {
        display: flex;
        flex-direction: column;
        img {
          width: 190px;
          height: 182px;
        }
        button {
          margin-top: 5px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #0874fa;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }
  :deep(.el-input) {
    width: auto;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }
  :deep(.el-table thead tr > th) {
    height: 60px !important;
    background: #f9fafe !important;
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 21px !important;
    color: #333333 !important;
  }

  :deep(.el-pagination) {
    .is-active,
    .number {
      width: 33px;
      height: 33px;
      background: #007cff;
    }

    :deep(.el-pagination__goto, .el-pagination__classifier) {
      color: #666;
      font-weight: 400;
      font-size: 21px;
    }

    :deep(.el-input__inner) {
      color: #666;
      font-size: 21px !important;
      width: 20px;
    }
    :deep(.el-pagination__total) {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 21px;
      color: #666666;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev {
      background: transparent !important;

      font-size: 21px;
      width: 30px !important;
      height: 30px !important;
    }

    .el-pagination.is-background .btn-next.is-active,
    .el-pagination.is-background .btn-prev.is-active,
    .el-pagination.is-background .el-pager li.is-active {
      color: #666 !important;
      font-size: 21px;
    }
  }
  :deep(.el-dialog__header) {
    padding-bottom: 0px !important ;
  }
}
</style>
